const path=require('path')
const HTMLWebpackPlugin=require('html-webpack-plugin')
// const {CleanWebpackPlugin} =require('clean-webpack-plugin')
const  MiniCssExtractPlugin=require('mini-css-extract-plugin')


module.exports={
    mode:'development',

    devtool:'eval-cheap-module-source-map',

    
    output:{
        filename:"[name].js"
    },

    // resolve:{
    //     extensions:['.jsx','.js','mjs','json'],
    //     alias:{
    //         '@':path.resolve(__dirname,'../src')
    //     }
    // },

    // module:{
    //     rules:[
    //         {
    //             test:/\.m?jsx?$/,
    //             exclude:/node_modules/,
    //             use:{
    //                 loader:'babel-loader',
    //                 options:{
    //                     presets:[],
    //                     plugins:[
    //                         '@babel/plugin-transform-runtime'
    //                     ]
    //                 }
    //             }
    //         },
    //         {
    //             test:/\.css$/i,
    //             use:[MiniCssExtractPlugin.loader,'css-loader']
    //         },
    //         {
    //             test:/\.(png|svg|jpg|jpeg|gif)$/i,
    //             type:'asset/resource',
    //             generator:{
    //                 filename:'img/[hash][ext][query]'
    //             }
    //         }
    //     ]
    // },


    devServer:{
        contentBase:'./dist',
        port:8080,
        historyApiFallback:true,
        proxy:{
            '/api':{
                target:'http://localhost:9000',
                pathRewrite:{'^/api':''},
            }
        }
    },
   
    plugins:[
        // new HTMLWebpackPlugin({
        //     template:'./public/index.html',
        //     filename:'index.html'
        // }),
        // new CleanWebpackPlugin(),
        // new MiniCssExtractPlugin({
        //     filename:({chunk})=>`${chunk.name.replace('js/','css/')}-[hash:8].css`
        // })
    ]
}